<!--
 * @Author: your name
 * @Date: 2021-09-20 22:42:44
 * @LastEditTime: 2021-09-21 22:24:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \重构项目\briup-ej-app\src\components\worldMap.vue
-->
<!--
 * @Author: your name
 * @Date: 2021-09-19 18:44:31
 * @LastEditTime: 2021-09-20 21:22:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \重构项目\briup-ej-app\src\views\Mine\Mine.vue
-->
<template>
  <div class="echarts">
    <div :style="{ height: height, width: width }" ref="myEchart"></div>
  </div>
</template>
<script>
import "@/assets/world.js";
export default {
  name: "echarts",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "280px",
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.myEchart);
      window.onresize = this.$echarts.init(this.$refs.myEchart).resize;
      // 把配置和数据放这里
      this.chart.setOption({
        backgroundColor: "#F8F9FB",
        visualMap: {
          bottom: 0, // 位置调整
          left: 0, // 位置调整
          type: "piecewise",
          // inverse:true,
          itemHeight: 10,
          itemWidth: 10,
          textGap: 0,
          itemGap: 2,
          // orient: "horizontal",
          pieces: [
            {
              value: 0,
              color: "#ffffff",
            },
            {
              // 颜色区间
              min: 1,
              max: 999,
              color: "#FFE5DB",
              label: "1-999",
            },
            {
              min: 1000,
              max: 10000,
              color: "#FF6954",
              label: "1千-1万",
            },
            {
              min: 10000,
              max: 100000,
              color: "#FF9883",
              label: "1万-10万",
            },
            {
              min: 100000,
              max: 1000000,
              color: "#FF6954",
              label: "10万-1百万",
            },
            {
              min: 1000000,
              max: 5000000,
              color: "#E93030",
              label: "1百万-5百万",
            },
            {
              min: 5000000,
              max: 10000000,
              color: "#E93030",
              label: "5百万-1千万",
            },
            {
              min: 10000000,
              color: "#8D0704",
              label: ">=1千万",
            },
          ],
        },
        // 提示
        tooltip: {
          trigger: "item",
          formatter: "地区: {b}<br />数量: {c}",
        },
        series: [
          {
            zoom: "1.2",
            type: "map",
            //地图的类型
            mapType: "world",
            //地图位置
            mapLocation: {
              y: 50,
              x: 35,
            },
            data: this.dataList,
            symbolSize: 20,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            // 区域的颜色
            itemStyle: {
              emphasis: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
          },
        ],
      });
    },
  },
  computed: {},
  created() {},
};
</script>